<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<center>
    <font color="red" size="7">qq注册页面</font>
    <br/>
    <input type="text" name="username" onkeyup="kp(this)" /> <span id="sp"></span> <br/>
    <input type="password" name="password"/><br/>
    <input type="submit" value="注册"/>
</center>
<script type="text/javascript">

    //当用户名输入框输入内容就调用此方法
    function kp(ipt){

        //1.获取input输入框的value
        var value = ipt.value;
        //2.进行验证
        if(value != null && value !=""){
            //1-5
            //1.创建Ajax
            var xmlhttp = new XMLHttpRequest();

            //2.设置状态改变监听
            xmlhttp.onreadystatechange = function(){

                //5获取响应数据
                if(xmlhttp.readyState == 4 && xmlhttp.status ==200)
                {

                    var result = xmlhttp.responseText; //获取结果

                    //  1 行    2 不行

                    //1.找到span标签

                    var sp = document.getElementById("sp");

                    if(result == "1"){
                        //成功的 span 提示一句绿色的话
                        sp.innerHTML=""; //清空
                        var ft = document.createElement("font");
                        var fttext = document.createTextNode("恭喜您!可以注册!!"); //文本标签
                        ft.setAttribute("color", "green");
                        ft.appendChild(fttext);
                        sp.appendChild(ft);
                    }else{
                        //失败的 span 提示一句红色的话
                        sp.innerText="用户已经被注册!";
                        sp.style.color = "red";
                    }
                }

            }
            //3.设置ajax method  url
            xmlhttp.open("POST","/user/login");
            //4.发送请求
            //设置一个请求头
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xmlhttp.send("value="+value);

        }
    }
</script>
</body>
</html>